<template>
	<div class="div">
		<div class="div2">
			<div class="btn">
				{{$store.state.pic}}
				<h5 style="margin-left: 0.5vw;color:#999ba1;">首页-书城</h5>
				<h5 style="margin-left: 40vw;color:#999ba1;">你好!
					<el-button type="text" @click="dialogFormVisible = true">{{d}}</el-button>
					<el-dialog title="登录" :visible.sync="dialogFormVisible">
						<el-form :model="user">
							<el-form-item label="username" :label-width="formLabelWidth">
								<el-input v-model="user.username" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="password" :label-width="formLabelWidth">
								<el-input v-model="user.password" autocomplete="off"></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="login()">确 定</el-button>
						</div>
					</el-dialog>
				</h5>
			</div>
			<div class="div3">
				<router-link to="/">
					<h5>免费注册</h5>
				</router-link>
			</div>
			<div class="div4">
				<router-link to="/">
					<h5>|我的购物车</h5>
				</router-link>
				<router-link to="/">
					<h5>|我的订单|</h5>
				</router-link>
			</div>
			<aside>
				<router-link to="/">
					<h5 @click="logout()">退出</h5>
				</router-link>
			</aside>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'PcHeader',
		data() {
			return {
				dialogTableVisible: false,
				dialogFormVisible: false,
				user: {
					username: '',
					password: '',
				},
				formLabelWidth: '120px',
				d:'请登录'
			}
		},
		methods:{
			login() {
				this.dialogFormVisible=false;
				this.$postk("/api/login",this.user).then((resp)=>{
					console.log(resp);
					let token=resp.data.data.token;
					window.localStorage.setItem("token",token);
					console.log(200);
					this.$message({
						message:resp.data.msg,
						type:'success'
					})
					this.$get("/api/user/info").then((resp)=>{
						console.log(resp);
						console.log(resp.data);
						window.localStorage.setItem("token",token);
						window.localStorage.setItem("role",resp.data.data.role);
						window.localStorage.setItem("account",resp.data.data.account);
						this.$store.state.name=resp.data.data.name;
						this.$store.state.role=resp.data.data.role;
						this.$store.state.account=resp.data.data.account;
						this.d=this.$store.state.name;
						if(this.$store.state.role=='adm'){
							this.$router.push("/backendManage");
						}
					})
				})
				
			},
			logout(){
				window.localStorage.setItem("token",'');
				window.localStorage.setItem("role",'');
				window.localStorage.setItem("account",'');
			}
		},
		mounted(){
			
		}
	}
</script>

<style scoped>
	.div {
		width: 100%;
	}

	.div .div2 .btn {
		display: flex;
		align-items: center;
	}

	.div .div2 {
		width: 100%;
		display: flex;
		height: 7vh;
		background-color: #eaeaea;
		align-items: center;
	}

	.div .div2 img {
		width: 3.5%;
		border-radius: 50%;
		margin-left: 4rem;
	}

	.div .div2 .div3 {
		display: flex;
		margin-left: 1vw;
	}

	.div .div2 .div4 {
		display: flex;
		margin-left: 5vw;
	}

	.div .div2 aside {
		margin-left: 15vw;
	}
</style>
